<template>
	<transition name="back-classes-transiton"
				enter-active-class="animated fadeInRight"
				leave-active-class="animated fadeOutRight">
	<div class="food" ref="foodWrapper" v-show="foodShow">
		<div class="content">
			<div class="image-wrapper">
				<img :src="food.image" />
				<div class="back" @click="toGoods">
					<i class="icon-arrow_lift"></i>
				</div>
			</div>
			<div class="message-wrapper">
				<h1 class="title">{{food.name}}</h1>
				<div class="message">
					<span class="sell">月售{{food.sellCount}}份</span>
					<span class="rating">好评率{{food.rating}}%</span>
				</div>
				<div class="price">
					<span class="now">￥{{food.price}}</span>
					<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
				</div>
				<div class="control-wrapper" v-show="food.count>0">
					<cartcontrol :food="food"></cartcontrol>
				</div>
				<div class="cart" v-show="food.count===0||!food.count" @click="addFood">加入购物车</div>
			</div>
			<split></split>
			<div class="desc">
				<h1 class="title">商品介绍</h1>
			    <p class="info">{{food.info}}</p>
			</div>
			<split></split>
			<div class="rating-wrapper">
				<h1 class="title">商品评价</h1>
				<ratingSelect :ratingType="ratingType" :onlyContent="onlyContent" :desc="desc" :ratings="food.ratings"></ratingSelect>
				<div class="rating-content">
					<ul v-show="food.ratings&&food.ratings.length" id="contentList">
						<li v-if="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings" class="rating-item border-1px">
							<div class="user">
								<span class="name">{{rating.username}}</span>
								<img :src="rating.avatar" class="icon" width="12" height="12"/>
							</div>
							<div class="time">
								{{rating.rateTime | dateFormat}}
							</div>
							<p class="text"><span :class="{'icon-thumb_down':rating.rateType==1,'icon-thumb_up':rating.rateType==0}"></span>{{rating.text}}</p>
						</li>
					</ul>
					<div class="no-rating" v-show="!food.ratings||!food.ratings.length||flag">暂无评价</div>
				</div>
			</div>
		</div>
	</div>
	</transition>
</template>

<script>
	const POSITIVE=0//推荐
	const NEGATIVE=1//吐槽
	const ALL=2 //全部
	import BScroll from 'better-scroll'
	import cartcontrol from '@/components/cartControl.vue'
	import Vue from 'vue'
	import split from '@/components/split.vue'
	import ratingSelect from '@/components/ratingSelect.vue'
	import {formatDate} from '@/common/js/date.js'
	export default{
		name:'food',
		data(){
			return{
				foodShow:false,
				ratingType:ALL,
				onlyContent:false,
				desc:{
					all:'全部',
					positive:'推荐',
					negative:'吐槽'
				},
				flag:false
			}
		},
		filters:{
			dateFormat(time){
				var date=new Date(time)
				return formatDate(date,'yyyy-MM-dd hh:mm:ss')
			}
		},
		props:{
			food:{
				type:Object
			}
		},
		
		components:{
			cartcontrol,
			split,
			ratingSelect
		},
		methods:{
			addFood(){
				Vue.set(this.food,'count',1)
			},
			toGoods(){
				this.foodShow=false
			},
			show(){
				this.foodShow=true,
				this.$nextTick(()=>{
					if(!this.scroll){
						this.scroll=new BScroll(this.$refs.foodWrapper,{
							click:true
						})
					}else{
						this.scroll.refresh()
					}
				})
			},
			needShow(type,text){
				if(this.onlyContent&&!text){
					
					return false
				}
				if(this.ratingType===ALL){
					return true
				}else{
					
					return this.ratingType==type
				}
			},
			ratingSelectType(type){
				this.ratingType=type
				
				
			},
			toggleContent(content){
				this.onlyContent=content
				
			}
		},
		created(){
			this.$root.eventHub.$on('selectType',(type)=>{
				this.ratingSelectType(type)
			})
			this.$root.eventHub.$on('selectContent',(content)=>{
				this.toggleContent(content)
			})
		},
		updated(){
			//当页面内容变化的时候
			//获取原生的DOM
			let result=document.getElementById('contentList').getElementsByTagName('li').length
			if(result==0){
				this.flag=true
			}else{
				this.flag=false
			}
		}
		
	}
</script>

<style lang="scss">
	@import '../common/style/mixin.scss';
	.food{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 48px;
		z-index: 30;
		overflow:hidden;
		background: #fff;
		width: 100%;
		.image-wrapper{
			position: relative;
			width: 100%;
			height: 0;
			padding-top: 100%;
			img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.back{
				position: absolute;
				top:0;
				left:0;
				padding: 10px;
				color: #fff;
				font-size: 18px;
				font-weight: 700;
			}
		}
		.message-wrapper{
			position: relative;
			padding: 18px;
			.title{
				font-size: 14px;
				font-weight: 700;
				line-height: 14px;
				color: rgb(7,17,27);
				margin-bottom: 8px;
			}
			.message{
				margin-bottom: 18px;
				.sell,.rating{
					font-size: 10px;
					line-height: 10px;
					color: rgb(147,153,159);
					display: inline-block;
				}
				.rating{
					margin-left: 12px;
				}
			}
			.price{
				.now{
					font-size: 14px;
					font-weight: 700;
					line-height: 24px;
					color: rgb(240,20,20);
				}
				.old{
					font-size: 10px;
					font-weight: 200;
					color: rgb(147,153,159);
					line-height: 24px;
					margin-left: 12px;
					text-decoration: line-through;
				}
			}
			.control-wrapper{
				position: absolute;
				right: 18px;
				bottom: 18px;
			}
			.cart{
				position: absolute;
				bottom: 18px;
				right: 18px;
				padding: 6px 12px;
				box-sizing: border-box;
				border-radius: 12px;
				background-color: rgb(0,160,220);
				color: #fff;
				font-size: 12px;
				line-height: 12px;
			}
		}
		.desc{
			padding: 18px;
			.title{
				font-size: 14px;
				font-weight: 700;
				color: rgb(7,17,27);
				line-height: 24px;
				margin-bottom: 6px;
			}
			.info{
				font-size: 12px;
				font-weight: 200;
				color: rgb(77,85,93);
				line-height: 24px;
				padding: 0 8px;
			}
		}
		.rating-wrapper{
			margin-top: 18px;
			.title{
				font-size: 14px;
				font-weight: 700;
				color: rgb(7,17,27);
				line-height: 24px;
				margin-bottom: 6px;
				margin-left: 18px;
			}
			.rating-content{
				padding: 0 18px;
				.rating-item{
					position: relative;;
					padding: 16px 0;
					@include  border-1px(rgba(7,17,27,0.1));
					&:last-child{
						@include border-none()
					}
					.user{
						position: absolute;
						top: 16px;
						right: 0;
						.icon{
							vertical-align: top;
							margin-left: 6px;
							border-radius: 50%;
						}
						.name{
							vertical-align: top;
							font-size: 10px;
							line-height: 12px;
							color: rgb(147,153,159);
						}
					}
					.time{
						font-size: 10px;
						line-height: 12px;
						color: rgb(147,153,159);
						margin-bottom: 6px;
					}
					.text{
						font-size: 12px;
						line-height: 24px;
						color: rgb(7,17,27);
						.icon-thumb_down,.icon-thumb_up{
							display: inline-block;
							margin-right: 4px;
						}
						.icon-thumb_down{
							color: rgb(147,153,159);
						}
						.icon-thumb_up{
							color: rgb(0,160,220);
						}
					}
				}
				.no-rating{
					color: rgb(7,17,27);
					font-size: 12px;
					font-weight: 700;
					margin: 18px 0;
				}
			}
		}
	}
</style>
